<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">


    <title> - Bootstrap Table</title>
    <meta name="keywords" content="">
    <meta name="description" content="">

    <link rel="shortcut icon" href="favicon.ico">
    <link href="/hadmin/css/bootstrap.min.css?v=3.3.6" rel="stylesheet">
    <link href="/hadmin/css/font-awesome.css?v=4.4.0" rel="stylesheet">
    <!-- Data Tables -->
    <link href="/hadmin/css/plugins/bootstrap-table-n/bootstrap-table.min.css" rel="stylesheet">

    <link href="/hadmin/css/animate.css" rel="stylesheet">
    <link href="/hadmin/css/style.css?v=4.1.0" rel="stylesheet">

    <link href="/hadmin/css/plugins/toastr/toastr.min.css" rel="stylesheet">

    <!-- Sweet Alert -->
    <link href="/hadmin/css/plugins/sweetalert/sweetalert.css" rel="stylesheet">

    <link href="/hadmin/css/plugins/treeview/bootstrap-treeview.min.css" rel="stylesheet">
</head>
<body>
    <div class="wrapper wrapper-content  animated fadeInRight">
        <div class="row">
            <div class="col-sm-4">
                <div class="ibox " id="vapp">
                    <div class="ibox-title">
                        <h5>组织架构</h5>
                        <div class="ibox-tools">
                            <button  class="btn btn-xs btn-info " type="button" data-toggle="tooltip"
                                     data-placement="left" title="添加组织" @click="addtop"><i class="fa fa-plus"></i></button>
                            <button  class="btn btn-xs btn-info " type="button" data-toggle="tooltip"
                                     data-placement="left" title="编辑组织" @click="edittop"><i class="fa fa-pencil"></i></button>
                            <button  class="btn btn-xs btn-danger " type="button" data-toggle="tooltip"
                                     data-placement="left" title="删除组织" @click="deltop"><i class="fa fa-trash"></i></button>
                        </div>
                    </div>
                    <div class="ibox-content" >
                        <div id="dptreeview" class="test"></div>
                    </div>

                </div>
            </div>
            <div class="col-sm-8">
                <div class="tabs-container">
                    <ul class="nav nav-tabs">
                        <li class="active"><a data-toggle="tab" href="#tab-1" aria-expanded="true">职位</a>
                        </li>
                        <li class=""><a data-toggle="tab" href="#tab-2" aria-expanded="false">人员</a>
                        </li>
                    </ul>
                    <div class="tab-content">
                        <div id="tab-1" class="tab-pane active">
                            <div class="panel-body">
                                <div id="toolbar" class="btn-group">
                                    <button class="btn btn-info " type="button" id="addp"><i class="fa fa-plus"></i>&nbsp;添加</button>
                                    <button class="btn btn-info " type="button" id="del"><i class="fa fa-trash"></i>&nbsp;移除</button>
                                </div>

                                <div class="row">
                                    <table class="table table-striped table-bordered table-hover " id="zwtable">
                                    </table>
                                </div>
                            </div>
                        </div>
                        <div id="tab-2" class="tab-pane">
                            <div class="panel-body">
                                <table class="table table-striped table-bordered table-hover " id="ygtable">
                                </table>
                            </div>
                        </div>
                    </div>


                </div>
            </div>
        </div>
    </div>

    <!--添加 -->
    <div class="modal fade" style="width: 90%"  id="addposiondepart" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog" style="width: 70%">
            <div class="modal-content" style="width: 70%">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                    <h4 class="modal-title" id="myModalLabel">职位信息匹配</h4>
                </div>
                <div class="modal-body">
                    <div class="row">
                        <div class="col-sm-12">
                            <div class="ibox float-e-margins">
                                <div class="ibox-content">
                                    <div class="row">
                                        <div class="col-sm-12">
                                            <form role="form" id="addform">
                                                <div class="col-md-12">
                                                    <div class="form-group">
                                                        <label class="col-sm-3 control-label">职位：</label>
                                                        <div class="col-sm-9">
                                                            <select class="form-control" name="pzw" id="pzw" >

                                                            </select>
                                                        </div>
                                                    </div>
                                                </div>
                                            </form>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                    <button type="button" class="btn btn-primary" id="addbtn">提交</button>
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal -->
    </div>
</body>
<!-- 全局js -->
<script src="/hadmin/js/jquery.min.js?v=2.1.4"></script>
<script src="/hadmin/js/bootstrap.min.js?v=3.3.6"></script>

<!-- 自定义js -->
<script src="/hadmin/js/content.js?v=1.0.0"></script>


<!-- Data Tables -->
<script src="/hadmin/js/plugins/bootstrap-table-n/bootstrap-table.min.js"></script>
<script src="/hadmin/js/plugins/bootstrap-table-n/locale/bootstrap-table-zh-CN.min.js"></script>

<!-- Nestable List
<script src="/hadmin/js/plugins/nestable/jquery.nestable.js"></script> -->

<!-- Bootstrap-Treeview plugin javascript -->
<script src="/hadmin/js/plugins/treeview/bootstrap-treeview.min.js"></script>

<!-- Toastr script -->
<script src="/hadmin/js/plugins/toastr/toastr.min.js"></script>

<!-- layer javascript -->
<script src="/hadmin/js/layer/layer.js"></script>

<!-- Sweet alert -->
<script src="/hadmin/js/plugins/sweetalert/sweetalert.min.js"></script>

<script src="/vue/vue.js"></script>
<script src="/vue/axios.min.js"></script>
<script src="/vue/axios-tools.js"></script>

<script>
    $(function () {


        var dpApp = new Vue({
            el: '#vapp',
            data: {
                reload: false,
                departments: [],
                selNode: {
                    id: '',
                    text: ''
                }
            },
            computed: {
                reloadTree: function () {
                    let _this = this
                    axiosconfig({
                        url: '/personnel/sys/tree',
                        method: 'get',
                        succ: function (back) {

                        }
                    })
                },
                loadRight(){
                    //todo 通过选择节点获取右侧信息
                    //

                }
            },
            methods: {
                addtop(){
                    let selnode = $('#dptreeview').treeview('getSelected')
                    console.info(selnode[0])
                    var _this = this
                    layer.prompt({title: '输入组织名称，并确认', formType: 0}, function(pass, index){
                        console.info(pass)
                        let pjson = {
                            name: pass
                        }
                        if(selnode.length >0){
                            pjson.parentcode = selnode[0].id
                        }
                        //保存组织机构
                        axiosconfig({
                            url: '/personnel/sys/department',
                            method: 'post',
                            data: pjson,
                            succ: function (back) {
                                loadTree()
                                layer.close(index);
                            }
                        })

                    });
                },
                edittop(){
                    let selnode = $('#dptreeview').treeview('getSelected')
                    var _this = this
                    if(selnode.length != 1){
                        layer.alert('请选择要编辑的组织', {
                            skin: 'layui-layer-molv' //样式类名
                            ,closeBtn: 0
                            ,anim: 4 //动画类型
                        });
                    }else{
                        layer.prompt({title: '输入新组织名称，并确认', formType: 0}, function(pass, index){
                            console.info(pass)
                            let pjson = {
                                id: selnode[0].id,
                                name: pass
                            }
                            //保存组织机构
                            axiosconfig({
                                url: '/personnel/sys/department',
                                method: 'put',
                                data: pjson,
                                succ: function (back) {
                                    loadTree()
                                    layer.close(index);
                                }
                            })

                        });
                    }
                },
                deltop(){
                    let selnode = $('#dptreeview').treeview('getSelected')
                    var _this = this
                    if(selnode.length != 1){
                        layer.alert('请选择要删除的组织', {
                            skin: 'layui-layer-molv' //样式类名
                            ,closeBtn: 0
                            ,anim: 4 //动画类型
                        });
                    }else{
                        layer.confirm('您确定要删除该组织，下属组织也会被删除？', {
                            btn: ['确定','取消'] //按钮
                        }, function(index){
                            let pjson = {
                                id: selnode[0].id
                            }
                            //保存组织机构
                            axiosconfig({
                                url: '/personnel/sys/department',
                                method: 'delete',
                                data: pjson,
                                succ: function (back) {
                                    loadTree()
                                    layer.close(index);
                                }
                            })
                        }, function(){

                        });

                    }
                }
            }
        })

        function loadTree(){
            axiosconfig({
                url: '/personnel/sys/tree',
                method: 'get',
                succ: function (back) {
                    dpApp.departments = back.data
                    $('#dptreeview').treeview({
                        data: dpApp.departments,
                        color: "#428bca",
                        expandIcon: 'glyphicon glyphicon-folder-close',
                        collapseIcon: 'glyphicon glyphicon-folder-open',
                        nodeIcon: "glyphicon glyphicon-leaf",
                        showBorder: false,
                        onNodeSelected: nodeclick,
                        onNodeUnselected: nodeunclick
                    });
                }
            })
        }
        
        var zwtable;
        
        function nodeclick(event, data){
            //todo 获取右侧列表信息
            dpApp.selNode = {
                id: data.id,
                text: data.text
            }
            //职位信息
            var TableInit = function () {
                var oTableInit = new Object();
                //初始化Table
                oTableInit.Init = function () {
                    $('#zwtable').bootstrapTable('destroy');
                    $('#zwtable').bootstrapTable({
                        url: '/personnel/sys/positionofpage',         //请求后台的URL（*）
                        method: 'post',                      //请求方式（*）
                        toolbar: '#toolbar',                //工具按钮用哪个容器
                        striped: true,                      //是否显示行间隔色
                        cache: false,                       //是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*）
                        pagination: true,                   //是否显示分页（*）
                        sortable: false,                     //是否启用排序
                        sortOrder: "asc",                   //排序方式
                        queryParams: oTableInit.queryParams,//传递参数（*）
                        sidePagination: "server",           //分页方式：client客户端分页，server服务端分页（*）
                        pageNumber:1,                       //初始化加载第一页，默认第一页
                        pageSize: 10,                       //每页的记录行数（*）
                        pageList: [10, 25, 50, 100],        //可供选择的每页的行数（*）
                        search: false,                       //是否显示表格搜索，此搜索是客户端搜索，不会进服务端，所以，个人感觉意义不大
                        strictSearch: true,
                        showColumns: true,                  //是否显示所有的列
                        showRefresh: true,                  //是否显示刷新按钮
                        minimumCountColumns: 1,             //最少允许的列数
                        clickToSelect: true,                //是否启用点击选中行
                        //       height: 500,                        //行高，如果没有设置height属性，表格自动根据记录条数觉得表格高度
                        uniqueId: "id",                     //每一行的唯一标识，一般为主键列
                        showToggle:true,                    //是否显示详细视图和列表视图的切换按钮
                        cardView: false,                    //是否显示详细视图
                        detailView: false,                   //是否显示父子表
                        columns: [{
                            checkbox: true
                        }, {
                            field: 'name',
                            title: '职位名称'
                        },{
                            field: 'button',
                            title: '操作',
                            events: oTableInit.oprateEvent,
                            formatter: oTableInit.btnformatter,
                            width: 150
                        }]
                    });
                };

                //得到查询的参数
                oTableInit.queryParams = function (params) {
                    console.info(params)
                    var temp = {   //这里的键的名字和控制器的变量名必须一直，这边改动，控制器也需要改成一样的
                        limit: params.limit,   //页面大小
                        offset: params.offset,  //开始条数码
                        searchCon: {
                            status: '0',
                            department: data.id
                        }
                    };
                    return temp;
                };
                oTableInit.btnformatter = function (value, row, index) {
                    return [
                        '<button id="rowDel" class="btn btn-xs btn-danger " type="button"><i class="fa fa-trash"></i>&nbsp;移除</button>'
                    ].join("")
                }
                oTableInit.oprateEvent = {
                    'click #rowDel': function (e, value, row, index) {
                        console.info(row)
                        axiosconfig({
                            url: '/personnel/sys/toposition',
                            method: 'delete',
                            data: {
                                positionId: row.id,
                                departmentId: dpApp.selNode.id
                            },
                            succ: function (back) {

                            }
                        })
                    }
                }
                return oTableInit;
            };
            zwtable = new TableInit();
            zwtable.Init();
            //人员信息

        }
        function nodeunclick(event, data){
            //todo 清空右侧列表
            dpApp.selNode = {
                id: '',
                text: ''
            }
            $('#zwtable').bootstrapTable('destroy');
        }
        loadTree()

        $('#addbtn').click(function () {
            axiosconfig({
                url: '/personnel/sys/toposition',
                method: 'post',
                data: {
                    departmentId: dpApp.selNode.id,
                    positionId: $('#pzw').val()
                },
                succ: function (back) {
                    $('#addposiondepart').modal('hide')
                }
            })
        })

        $('#addp').click(function () {
            if(dpApp.selNode.id == ''){
                swal("警告", "请先选择部门", "warning");
                return false
            }
            axiosconfig({
                url: '/personnel/sys/departnouse',
                method: 'get',
                params: {
                    depatmentId: dpApp.selNode.id
                },
                succ: function (back) {
                    if(back.data==null || back.data.length <= 0){
                        swal("警告", "没有可分配的职位", "warning");
                    }else{
                        $("#pzw").empty()
                        for(let i=0; i<back.data.length; i++){
                            $("#pzw").append("<option value='"+back.data[i].id+"'>"+back.data[i].name+"</option>");
                        }
                        $('#addposiondepart').modal('show')
                    }
                }
            })
        })

        $('#del').click(function () {
            var a= $('#zwtable').bootstrapTable('getSelections');
            if(a.length <= 0){
                return false
            }
            if(dpApp.selNode.id == ''){
                return false
            }
            let paramjson = []
            for(let i=0; i<a.length; i++){
                paramjson[i] = {
                    positionId: a[i].id,
                    departmentId: dpApp.selNode.id
                }
            }
            swal({
                title: "您确定要删除记录吗",
                text: "删除后将难以恢复，请谨慎操作！",
                type: "warning",
                showCancelButton: true,
                confirmButtonColor: "#DD6B55",
                confirmButtonText: "删除",
                closeOnConfirm: false
            }, function () {
                axiosconfig({
                    url: '/personnel/sys/topositionlist',
                    method: 'delete',
                    data: paramjson,
                    succ: function (back) {
                        swal("删除成功！", "您已经删除了信息。", "success");
                    }
                })

            });
        })
    })
</script>
</html>